<template>
    <div>
  
    </div>
  </template>
  
  <script  setup>
  import { onMounted, ref, reactive, toRefs } from 'vue';
  import * as THREE from "three"
  import {OrbitControls} from "three/examples/jsm/controls/OrbitControls"
  import {GLTFLoader} from "three/examples/jsm/loaders/GLTFLoader"//加载模型库
  import {DRACOLoader} from "three/examples/jsm/loaders/DRACOLoader"//解压模型库
  import gsap from "gsap" 
  
  //初始化场景
  const secene = new THREE.Scene();
  //初始化相机
  const camera = new THREE.PerspectiveCamera(
      75,
      window.innerWidth / window.innerHeight,
      0.1,
      1000
  );
  //更新摄像机投影矩阵
  camera.updateProjectionMatrix()
  //设置相机的初始位置
  camera.position.set(-3.23,2.98,4.06)
  
  //初始化渲染器
  const renderer=new THREE.WebGLRenderer({
     //设置抗锯齿
     antialias:true
  })
  renderer.setSize(window.innerWidth,window.innerHeight)
  //将渲染器加入到页面中
  document.body.appendChild(renderer.domElement);
  
  //初始化控制器
  const controls=new OrbitControls(camera,renderer.domElement)
  //设置控制器阻尼效果
  controls.enableDamping=true//开启阻尼效果
  
  //初始化加载器loader
  const  dracoLoader=new DRACOLoader()
  dracoLoader.setDecoderPath("./draco/");//设置解压模型的文件
  const gltfLoader=new GLTFLoader();
  gltfLoader.setDRACOLoader(dracoLoader)//加载解压的模型
  
  //加载模型
  gltfLoader.load("./model/scene.glb",(gltf)=>{
     const model=gltf.scene;
     secene.add(model)
  })
  //添加坐标系
  const axesHelper = new THREE.AxesHelper(4);
  secene.add(axesHelper)
  
  
  //添加平行光
  const light=new THREE.DirectionalLight(0xffffff,1);
  light.position.set(0,50,0);
  secene.add(light)
  
  function render(){//渲染函数
      requestAnimationFrame(render)
      renderer.render(secene,camera)
      controls.update()
      
  }
  render()
  
  //当页面发生变化时重新渲染
  window.addEventListener("resize",()=>{//监听画面变化，更新渲染画面
      console.log("页面发生变化了");
      //更新摄像头
      camera.aspect=window.innerWidth /window.innerHeight
      //更新摄像头的投影矩阵
      camera.updateProjectionMatrix()
  
      //更新渲染器的渲染范围
      renderer.setSize(window.innerWidth,window.innerHeight)
      //设置渲染器的像素比
      renderer.setPixelRatio(window.devicePixelRatio)
  })
  
  
  </script>
  <style >
  * {
    padding: 0;
    margin: 0;
  }
  
  canvas {
    width: 100vw;
    height: 100vh;
    position: fixed;
    left: 0;
    top: 0;
  }
  </style>